// 分类字典的表单弹窗
<template>
    <a-modal
        :title="title"
        :width="width"
        :visible="visible"
        :confirmLoading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        :destroyOnClose="true"
        cancelText="关闭">
        <a-spin :spinning="confirmLoading">
            <a-form-model ref="form" :model="model" :rules="validatorRules">
                <a-form-model-item label="父级节点" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <j-tree-select
                        ref="treeSelect"
                        placeholder="请选择父节点"
                        v-model="model.pid"
                        dict="sys_category,name,id"
                        pidField="pid"
                        pidValue="0"
                        :disabled="disabled"
                    ></j-tree-select>
                </a-form-model-item>
                <a-form-model-item label="分类名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> 
                    <a-input v-model="model.name" placeholder="请输入分类名称"></a-input>
                </a-form-model-item>
            </a-form-model>
        </a-spin>
     </a-modal>
</template>
<script>
import JTreeSelect from '@/common/components/domain/JTreeSelect'
export default {
    name: 'SysCategoryForm',
    components: {JTreeSelect},
    data() {
        return {
            title: '操作',
            width: 800, 
            visible: false,
            confirmLoading: false,
            model: {},
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
             wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
             },
            validatorRules: {
                name: [{ required: true,message: '请输入类型名称' }]
            },
            disabled: false
        }
    },
    methods: {
        add() {
          this.edit({});
        },
        edit(record) {
            this.model = Object.assign({},record);
            this.visible = true;
        },
        close() {
            this.$emit('close');
            this.visible = false;
            this.$refs.form.resetFields();
        },
        handleOk() {
            this.visible = false
        },
        handleCancel() {
            this.visible = false
        }
    }
}
</script>